<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bili主页</title>
  <link rel="stylesheet" href="../Css/nav_left.css" type="text/css" >
  <link rel="stylesheet" href="../Css/search.css" type="text/css" >
    <link rel="stylesheet" href="../Css/nav_right.css" type="text/css">
    <link rel="stylesheet" href="../Css/nav_class.css" type="text/css">
    <link rel="stylesheet" href="../Css/video_top.css" type="text/css">
</head>
<body>
<div class="container2">
    <div class="container">
        <img id="top" src="../static/img/顶部图片.avif" alt="图片">
        <div class="overlay">
            <div class="overlay2">
                <div class="nav_left">
                    <ul class="left_ul">
                        <li>
                            <a href="#" id="one">
                                <img id="svg" src="../static/img/icon.svg" alt="图片">
                                <span>首页</span>
                            </a>
                        </li>
                        <li>
                            <a href="#"><span>番剧</span></a>
                        </li>
                        <li>
                            <a href="#"><span>直播</span></a>
                        </li>
                        <li>
                            <a href="#"><span>游戏中心</span></a>
                        </li>
                        <li>
                            <a href="#"><span>会员购</span></a>
                        </li>
                        <li>
                            <a href="#"><span>漫画</span></a>
                        </li>
                        <li>
                            <a href="#"><span>赛事</span></a>
                        </li>
                        <li>
                            <a id="two" href="#">
                                <img id="svg2" src="../static/img/icon2.svg" alt="图片">
                                <span>下载客户端</span>
                            </a>
                        </li>
                    </ul>
                </div>
<!--                这个是导航栏中间的div,只设置了内间距-->
                <div id="search_form">
                    <div id="search_form2">
                            <label><input placeholder="搜索" type="text" name="search" id="Search"></label>
                            <button class="search_button">
                                <img style="width: 17px ;height: 17px" src="../static/img/搜索.svg">
                            </button>
                    </div>
                </div>
                <div class="nav_right">
                    <div id="nav_three">
                        <ul class="right_ul">
                            <li>
                                <div style="margin-right: 10px" class="用户头像">
                                    <img style="border: solid white 2px;width: 38px;height: 38px;border-radius: 50%" src="../static/img/11.jpg">
                                </div>
                            </li>
                            <li>
                                <a href="#" class="nav-link">
                                    <img src="../static/img/icon3.svg" alt="图片">
                                    <span>大会员</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">
                                    <img src="../static/img/icon4.svg" alt="图片">
                                    <span>消息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">
                                    <img src="../static/img/直播.svg" alt="图片">
                                    <span>动态</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">
                                    <img src="../static/img/收藏.svg" alt="图片">
                                    <span>收藏</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link">
                                    <img src="../static/img/历史.svg" alt="图片">
                                    <span>历史</span>
                                </a>
                            </li>
                            <li>
                                <a style="width: 52px" href="#" class="nav-link">
                                    <img src="../static/img/创作中心.svg" alt="图片">
                                    <span>创作中心</span>
                                </a>
                            </li>
                            <li>
                                <button class="right_nav_button right_button">
                                    <img src="../static/img/投稿.svg" alt="图片">
                                    <span>投稿</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="nav_class">
            <div class="class_left">
                <div class="class_left_one">
                    <div class="circle">
                        <img  class="icon" src="../static/img/动态.svg" alt="aaa">
                    </div>
                    <span>动态</span>
                </div>
                <div class="class_left_one">
                    <div class="circle">
                        <img  class="icon" src="../static/img/热门.svg" alt="aaa">
                    </div>
                    <span>热门</span>
                </div>
            </div>
            <div class="right_box">
                <div class="class_center">
                    <ul class="class_center_ul">
                        <li>
                            <a href="#"><span>番剧</span></a>
                        </li>
                        <li>
                            <a href="#"><span>国创</span></a>
                        </li>
                        <li>
                            <a href="#"><span>综艺</span></a>
                        </li>
                        <li>
                            <a href="#"><span>动画</span></a>
                        </li>
                        <li>
                            <a href="#"><span>鬼畜</span></a>
                        </li>

                        <li>
                            <a href="#"><span>舞蹈</span></a>
                        </li>
                        <li>
                            <a href="#"><span>娱乐</span></a>
                        </li>
                        <li>
                            <a href="#"><span>科技</span></a>
                        </li>
                        <li>
                            <a href="#"><span>美食</span></a>
                        </li>
                        <li>
                            <a href="#"><span>汽车</span></a>
                        </li>
                        <li>
                            <a href="#"><span>运动</span></a>
                        </li>
                    </ul>
                    <ul class="class_center_ul">
                        <li>
                            <a href="#"><span>电影</span></a>
                        </li>
                        <li>
                            <a href="#"><span>电视剧</span></a>
                        </li>
                        <li>
                            <a href="#"><span>纪录片</span></a>
                        </li>
                        <li>
                            <a href="#"><span>游戏</span></a>
                        </li>
                        <li>
                            <a href="#"><span>音乐</span></a>
                        </li>
                        <li>
                            <a href="#"><span>影视</span></a>
                        </li>
                        <li>
                            <a href="#"><span>知识</span></a>
                        </li>
                        <li>
                            <a href="#"><span>咨询</span></a>
                        </li>
                        <li>
                            <a href="#"><span>生活</span></a>
                        </li>
                        <li>
                            <a href="#"><span>时尚</span></a>
                        </li>
                        <li>
                            <a href="#"><span>更多</span></a>
                        </li>

                    </ul>
                </div>
                <div class="class_right">
                    <ul class="nav_class_right_ul">
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/专栏.svg" alt="hhh">
                                <span>专栏</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/活动.svg" alt="hhh">
                                <span>活动</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/社区中心.svg" alt="hhh">
                                <span>社区中心</span>
                            </a>
                        </li>
                    </ul>
                    <ul class="nav_class_right_ul">
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/直播.svg" alt="hhh">
                            <span>直播</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/课堂.svg" alt="hhh">
                                <span>课堂</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../static/img/第二层最右边图标/新歌热榜.svg" alt="hhh">
                                <span>新歌热榜</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="video_class">
    <div class="video_left">
        <div class="video_left_top">
            <a href="#">
                <img src="../static/img/第三层视频文件/左边.avif" >
            </a>
        </div>
        <div class="video_left_middle">
            <div class="video_left_middle_left">
                <a>
                    <span id="big_video_font">
                        魔道大boss，看招！
                    </span>
                </a>
            </div>
            <div class="video_left_middle_right">
                <button class="video_left_button">
                    <img style="width: 12px;height: 12px" src="../static/img/第三层左边视频切换按键.svg" alt="aaa">
                </button>
                <button class="video_left_button" style="margin: 0">
                    <img style="width: 12px;height: 12px" src="../static/img/第三层左边视频right键.svg" alt="aaa">
                </button>
            </div>
        </div>
        <div class="video_left_bottom">
            <ul class="video_left_ul">
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <div>

                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="video_center">
        <ul>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/上1.avif">
                <a class="a_top">
                    <span>
                        赏金令1005级一个箱子没开，今天一起开了，看看爆率怎样
                    </span>
                </a>
                <a class="a_bottom">
                    <img src="../static/img/视频文件下up图标/up.svg">
                    <span>
                        CFM菜问 · 昨天
                    </span>
                </a>
            </li>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/上2.avif">
                <a class="a_top">
                    <span>
                        因不遵守规则，界外狂潮在外网引发争论
                    </span>
                </a>
                <a class="a_bottom">
                    <div class="a_bottom_div">
                           <span> 一万点赞 </span>
                    </div>
                    <span>干饭三健客 · 11小时前</span>
                </a>
            </li>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/上3.avif">
                <a class="a_top">
                    <span>
                        通宵一晚上扛不住了，找个40块钱的挂壁房睡一觉，醒了继续战斗
                    </span>
                </a>
                <a class="a_bottom">
                    <div class="a_bottom_div">
                        <span> 已关注 </span>
                    </div>
                    <span>寞桀缘才 · 9小时前</span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/下1.avif">
                <a class="a_top">
                    <span>火柴人 VS 编程 (Coding)</span>
                </a>
                <a class="a_bottom">
                    <img src="../static/img/视频文件下up图标/up.svg">
                    <span>
                        JIEJOE_轻敲代码 · 2-26
                    </span>
                </a>
            </li>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/下2.avif">
                <a class="a_top">
                    <span>
                        真正的俄罗斯人看《说俄语的艾莉同学》的反应？
                    </span>
                </a>
                <a class="a_bottom">
                    <img src="../static/img/视频文件下up图标/up.svg">
                    <span>
                        南鹏不想当非酋 · 15小时前
                    </span>
                </a>
            </li>
            <li>
                <img  class="video_img" src="../static/img/第三层视频文件/下3.avif">
                <a class="a_top">
                    <span>
                        美式掉头：弃欧投俄把酒言欢，乌克兰决议票型魔幻
                    </span>
                </a>
                <a class="a_bottom">
                    <div class="a_bottom_div">
                        <span>
                            五万点赞
                        </span>
                    </div>
                    <span>
                        差评君 · 2-16
                    </span>
                </a>
            </li>
        </ul>
    </div>
    <div class="video_button_right">
        <div class="button_container">
            <button class="video_right_button">
                <img src="../static/img/换一换图标.svg">
                <span>换一换</span>
            </button>
        </div>
    </div>
</div>
</body>
</html>



